<!-- <template>
  <div>
    <div style="padding: 25px 10px;color:red;text-align: center;">
    注意看浏览器地址的变化！！
    </div>
    <router-link to='/'>点我再切换回来度试呗</router-link>
    
  </div>
</template> -->
<template>
  <!--查看明细-->
    <loading v-if="loading"></loading>
    <div v-else id="coupon" :class="redPacketList.length==0?'coupon-no-data':'coupon'">
          <!--砸蛋页面-->
          <div class="coupon-box">
              <div class="list relative" v-for="(usable,idx) in redPacketList" :class="usable.is_useful == 1?'usable-coupon':'unusable-coupon'" @click="selectRedPacket(usable)">
                  <div class="item2">
                      <p class="text" v-text="usable.game_title"></p>
                      <p class="time"><span>有效期：{{usable.end_time | time("yyyy-MM-dd hh:mm",usable.end_time)}}</span></p>
                      <h3 v-text="'【满'+usable.limit_price+'元可用】'"></h3>
                  </div>
                  <div class="item1"><span class="icon">￥</span><span class="money"  v-text="usable.price"></span></div>
                  <div class="absolute unusable-tag center" v-if="usable.is_useful !=1">暂不可用</div>
              </div>
              <div v-show="redPacketList.length == 0">
                <div class="flex" >
                  <img src="../../../assets/img/no-data-coupon.png" alt="点击屏幕，重新加载~" class="no-data"/>
                </div>
                <div class="default-text center">没有优惠券~</div>
              </div>
          </div>
    </div>
</template>
<script>
import './index.css'
import common from 'assets/js/common'
import Loading from "components/loading.vue"
export default {
  data() {
    return {
        unusableNumber:0,
        usableNumber:0,
        redPacketList:[],
        loading:true,
        adderId:'',
        times:0
    }
  }, 
  //在挂载开始之前被调用
  mounted:function(){
    this.adderId = common.getQueryString('adderId');
    this.times = common.getQueryString('times');
    this.getCoupon();
  }, 
  components:{ Loading },
  //相关操作事件
  methods: {
     getCoupon:function(){
        common.ajax({
            type:'GET',
            url:"api/adder/"+this.adderId+"/order/packet?num="+this.times
        }).then(res=>{
            this.loading = false;
            let result = res.data.sort(common.compare("is_useful",'desc'));
            this.redPacketList = result;
            let [unusableNumber,usableNumber] = [0,0];
            res.data.map(function(item,index){
                //不可用
                if(item.is_useful == 0){
                    unusableNumber+=1;
                    console.log(unusableNumber);
                }
                //可用
                if(item.is_useful == 1){
                    usableNumber+=1;
                }
            })
            this.unusableNumber = unusableNumber;
            this.usableNumber = usableNumber;
            if(usableNumber==0){
              //没有数据时情调存储避免选了有优惠券的技能又切换没有技能进优惠券返回会显示之前的优惠券问题
             localStorage.clear("coupon");
            }
        })
      },
      //选择优惠券后把对象存起来并关闭当前页面
      selectRedPacket:function(data){
        //判断可用优惠券
         if(data.is_useful == 1){
            localStorage.coupon = JSON.stringify(data);
            this.$router.back(-1);
         }
      }
  }
}
</script>
